<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE组件-父子组件交互-Prop[动态-for循环]</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <child v-for="site in sites" :site="site"></child>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('child', {
            props: ['site'],
            template: '<div>子组件内容：[name:{{site.name}}, url:{{site.url}}</div>'
        });

        var vueObj = new Vue({
            el: '#app',
            data: {
                sites: [
                    {name: '百度', url: 'www.baidu.com'},
                    {name: '谷歌', url: 'www.google.com'},
                    {name: '腾讯', url: 'www.qq.com'}
                ]
            }
        });
    </script>
</html>